<template>
	<view class="transaction" :style="{'background': '#F7F8FA', 'paddingTop':'160rpx'}">
		<!-- 头部 -->
		<view :style="{'paddingTop':StatusBar + 'px'}" class="index_nav">
			<view class="nav_head">
				<view class="back" @click="navigateBack()">
				</view>
				<view class="head_title">昨日成交</view>
				<view class="head_right">
					
				</view>
			</view>
		</view>
		
		<view class="transaction_body" :style="{}">
			<view class="body_list" v-if="list.length > 0">
				<view class="list_item u-border-bottom" v-for="(item, index) in list" :key="index">
					<view class="item_left">
						<view class="left_tag"><text>原神</text></view>
						<view class="left_title">【YBDSG78526】冒险等级：95，44黄，女主，13五星角五星角五星角</view>
						<view class="left_tagList">
							<view class="tagList_li">网易邮箱出售</view>
							<view class="tagList_li">网易邮箱出售</view>
						</view>
						<view class="left_bottom">
							<view class="bottom_price">
								<view>￥</view>
								168
							</view>
							<view class="bottom_collection">7人收藏</view>
						</view>
					</view>
					
					<view class="item_right">
						<image class="right_image" src="../../static/1.png"></image>
						<image class="right_completed" src=""></image>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
			
			<view v-else  style="display: flex;align-items: center;justify-content: center;height: 80vh;">
				<u-empty mode="list">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				headerIf: false,
				list: ['1','2','2'],
				status: 'loadmore',
				page: 0,
			}
		},
		onShow() {
		},
		onReady(){
		},
		onReachBottom() {
			if(this.page >= 3) return ;
			this.status = 'loading';
			this.page = ++ this.page;
			setTimeout(() => {
				this.list.push(this.list[0]);
				if(this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 100)
		},
		onPageScroll(e) {
			this.headerIf = e.scrollTop > 15
		},
		methods: {
		}
	}
</script>

<style lang="less" scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.transaction {
		width: 750rpx;
		height: 100vh;
		
		&::-webkit-scrollbar {
			display: none;
			/* Chrome Safari */
		}
		// 头部
		.index_nav {
			position: fixed;
			margin-bottom: 0;
			padding-bottom: 0;
			overflow: hidden;
			width: 100%;
			z-index: 99;
			top: 0;
			background: linear-gradient( 92deg, #BEF3E9 0%, #F8FDD3 94%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			.back {
				display: block;
				height: 30px;
				width: 30px;
				background: url(~@/static/myshop/down_line@2x.png) no-repeat;
				background-size: 100%;
				transform: rotate(90deg);
			}
			.nav_head {
				height: 106rpx;
				box-sizing: border-box;
				padding: 0 42rpx;
				display: flex;
				margin-bottom: 0;
				padding-bottom: 0;
				align-items: center;
				.head_title {
					font-weight: 800;
					font-size: 32rpx;
					color: #22150B;
					line-height: 18rpx;
					height: 18rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: 220rpx;
					margin-top: 21rpx;
				}
				.header_back {
					position: relative;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.head_text {
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.6);
					font-weight: bold;
				}
				.head_right {
					margin-left: auto;
					display: flex;
					image {
						width: 100%;
						height: 100%;
					}
					.head_right_search {
						width: 68rpx;
						height: 68rpx;
						position: relative;
					}
					.head_right_more {
						width: 68rpx;
						height: 68rpx;
						position: relative;
						margin-left: 20rpx;
					}
				}
			}
			.nav_shop {
				position: relative;
				width: 686rpx;
				height: 384rpx;
				margin: 0 auto;
				margin-top: 285rpx;
				padding-top: 14rpx;
				.nav_shop_image {
					width: 686rpx;
					height: 304rpx;
					position: absolute;
					top: 0;
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.nav_shop_title {
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 52rpx;
					text-align: center;
					position: relative;
					z-index: 2;
					font-style: normal;
					text-transform: none;
					margin-bottom: 12rpx;
				}
				
				.nav_shop_body {
					width: 650rpx;
					height: 172rpx;
					position: relative;
					z-index: 2;
					background: #FFE8E7;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					margin: 0 auto;
				}
			}
			
		}
		.index_nav_fxed {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 100;
		}
	
		.transaction_body {
			.body_list {
				margin-top: 20rpx;
				padding-bottom: 100rpx;
				height: 80vh;
				.list_item {
					width: 686rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					display: flex;
					justify-content: space-between;
					margin: 0 auto;
					margin-bottom: 20rpx;
					.item_left {
						width: 324rpx;
						margin-top: 20rpx;
						.left_tag {
							position: relative;
							margin-left: 20rpx;
							> text {
								font-weight: 500;
								font-size: 28rpx;
								color: #22150B;
								height: 48rpx;
								line-height: 48rpx;
								text-align: center;
								font-style: normal;
								text-transform: none;
								position: relative;
								z-index: 2;
								margin-left: 20rpx;
							}
							&::after {
								position: absolute;
								content: '';
								display: block;
								top: 0;
								width: 96rpx;
								z-index: 0;
								height: 48rpx;
								background: linear-gradient( 90deg, #FCE668 0%, rgba(255,255,255,0) 100%);
								border-radius: 100rpx 100rpx 100rpx 100rpx;
							}
						}
						.left_title {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							margin-left: 20rpx;
							color: #22150B;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							margin-top: 8rpx;
						}
						.left_tagList {
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							margin-left: 20rpx;
							margin-top: 2rpx;
							.tagList_li {
								padding: 0 16rpx;
								height: 40rpx;
								background: #FFFBEF;
								border-radius: 88rpx 88rpx 88rpx 88rpx;
								font-weight: 500;
								font-size: 20rpx;
								color: #FFA621;
								line-height: 40rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-bottom: 8rpx;
								margin-right: 8rpx;
							}
						}
						.left_bottom {
							margin-top: 8rpx;
							margin-bottom: 20rpx;
							display: flex;
							align-items: center;
							.bottom_price {
								display: flex;
								font-weight: 500;
								font-size: 32rpx;
								color: #FF2020;
								line-height: 44rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-left: 20rpx;
								>view {
									font-size: 24rpx;
									margin-top: 4rpx;
								}
							}
							.bottom_collection {
								margin-left: auto;
								font-weight: 500;
								font-size: 20rpx;
								color: #B0B0B0;
								line-height: 23rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}
					}
					.item_right {
						width: 302rpx;
						height: 232rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						margin-left: 16rpx;
						overflow: hidden;
						margin-top: 20rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						position: relative;
						image {
							width: 100%;
							height: 100%;
						}
						
						>.right_completed {
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
							margin: auto;
							width: 159rpx;
							height: 126rpx;
							background: #FCE668;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
						}
					}
				}
			}
		}
	}
</style>